<template>
  <div class="mx-auto overflow-hidden" style="width:100vw">
    <v-app-bar
      hide-on-scroll
      color="deep-purple accent-4"
      dark
      style="position: fixed;top: 0;z-index:50;"
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <span class="font-weight-medium" style="font-size:1.2857rem">采购商城</span>
      <v-spacer></v-spacer>
    </v-app-bar>
    <v-navigation-drawer
      app
      absolute
      temporary
      v-model="drawer"
      left
      floating
      clipped
      style="z-index:51"
    >
      <v-list dense nav class="py-0">
        <v-list-item two-line class="px-0">
          <v-list-item-avatar height="5.7143rem" width="5.7143rem">
            <img src="https://randomuser.me/api/portraits/men/81.jpg" />
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>{{token ? name:"请登录"}}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-divider></v-divider>
        <v-list-item v-for="item in items" :key="item.title" link :to="item.link">
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-btn class="mt-12" v-if="token" @click="outLogin" rounded block color="success">退出登录</v-btn>
        <v-btn class="mt-12" v-if="!token" to="/login" rounded block color="success">去登陆</v-btn>
      </v-list>
    </v-navigation-drawer>
    <!-- 轮播 -->
    <swiper style="margin-top:4rem" :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(item,i) in swiper" :key="i">
        <router-link :to="`/detail/${item.ID}`">
          <img style="width:100%;height:12.8571rem;" :src="item.imgs[0].url" />
        </router-link>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="my-3 text-center">
      <span class="d-block font-weight-black" style="font-size:1.3571rem">猜你喜欢</span>
      <span
        class="d-block"
        style="font-size: 12px;transform: scale(.83); opacity: .38; font-weight: lighter;"
      >实时推荐最适合你的宝贝</span>
    </div>
    <!-- 产品列表 -->
    <v-container fluid>
      <v-lazy
        v-model="isActive"
        :options="{
          threshold: .5
        }"
        min-height="400"
        transition="fade-transition"
      >
        <v-row dense>
          <v-col v-for="(card,i) in cards" :key="i" :cols="6">
            <v-card :to="`/detail/${card.ID}`">
              <!-- <router-link :to="/detail/card.ID"> -->
              <v-img
                :src="card.imgs[0].url"
                class="white--text align-end"
                gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.3)"
                height="15.7143rem"
              >
                <v-card-title v-text="card.name"></v-card-title>
              </v-img>
              <v-card-actions>
                <span style="color: #FF5000;">人民币(元):{{token?(card.CNY/100)+' 积分:'+card.point:'登陆查看'}}</span>
                <!-- <v-spacer></v-spacer>
                <v-btn icon>
                  <v-icon color="blue darken-1">mdi-cart-minus</v-icon>
                </v-btn>-->
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-lazy>
    </v-container>
  </div>
</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  components: {
    swiper,
    swiperSlide
  },
  data: () => ({
    // lazy参数
    isActive: false,
    token: localStorage.token,
    name: localStorage.name,

    // 所有swiper的参数
    swiperOption: {
      loop: true,
      pagination: {
        el: ".swiper-pagination"
      }
    },
    swiper: [],
    //vuetify参数
    drawer: false,
    group: null,
    // aside参数
    res: {},
    items: [
      { title: "我的订单", icon: "mdi-view-dashboard", link: "/order" },
      { title: "购物车", icon: "mdi-image", link: "/cart" },
      { title: "我的信息", icon: "mdi-account", link: "/register/1" }
      // { title: "收货地址", icon: "mdi-help-box", link: "/address/list" }
    ],
    cards: []
  }),

  watch: {
    group() {
      this.drawer = false;
    }
  },
  methods: {
    Fetch() {
      const info = {
        cmd: 0,
        val: {
          table: "items",
          weight: true
        }
      };
      if (localStorage.token) {
        info.val.token = localStorage.token;
      }
      this.$axios.post("q.php", info).then(res => {
        // console.log(res.data);
        if (res.data.result) {
          res.data.result.formatData();
          let num = 5 > res.data.result.length ? res.data.result.length : 5;
          for (let i = 0; i < num; i++) {
            this.swiper.push(res.data.result[i]);
          }
          this.cards = res.data.result;
          // console.log(this.$cp(this.cards[0]));
        }
      });
    },
    async outLogin() {
      this.$router.push("/login");
    }
  },
  created() {
    // this.swiperFetch();

    this.Fetch();
  }
};
</script>

<style lang="scss">
// swiper自定义样式
.swiper-container {
  .swiper-pagination {
    text-align: right;
    padding: 0 0.7143rem;
    .swiper-pagination-bullet {
      background: rgb(255, 255, 255);
      opacity: 1;
      border-radius: 0px;
      margin-right: 0.5714rem;
    }
    .swiper-pagination-bullet-active {
      background: rgb(37, 49, 209);
    }
  }
}
</style>